<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			
						.imga{
							animation: dfc .8s linear infinite;
						}
						@keyframes dfc{
							0%{
								transform: rotate(180deg);
							}
							30%{
								transform: rotate(360deg);
							}
							100%{
								transform: rotate(720deg);
							}
						}
						
						.imgb{
							animation: dfc1 .8s linear infinite;
						}
						@keyframes dfc1{
							0%{
								transform: rotateY(180deg) scale(1);
							}
							30%{
								transform: rotateY(360deg) scale(1.2);
							}
							100%{
								transform: rotateY(720deg) scale(1.4);
							}
						}
		
		</style>
	</head>
	<body>
		<img src="../img/dfc.jpg" alt="1">
		<audio src="../img/dafengche.mp3" autoplay=""></audio>
		<button id="btn1">开转</button>
		<button id="btn2">暂停</button>
		<button id="btn3">翻转</button>
		<script>
			
						/*jq  页面图片改变 而且 旋转*/
						$("#btn1").click(function(){
							// 元素  上属性  |  元素可以加类名
							$("img").attr("src","../img/dfc.jpg").addClass("imga");
							
						});
						//暂停  $("audio").removeAttr("src");
						$("#btn2").click(function(){
							// 元素  上属性  |  元素可以加类名
							$("img").attr("src","../img/dfc.jpg").removeClass("imga");
							$("audio").removeAttr("src");
						});
						//翻转： Y轴 缩放   类样式 .imgb
						$("#btn3").click(function(){
							// 元素  上属性  |  元素可以加类名
							$("img").attr("src","../img/dfc.jpg").toggleClass("imgb");
							$("audio").attr("src","../img/dafengche.mp3");
						});
		
		</script>
	</body>
</html>